<template>
	<view class="body">


		<view class="card">
			<view class="top_card">
				<view class="title">
					{{$t("auction.wait-buying")}}
				</view>
				<view class="time">
					
					<u-count-down ref="uCountDown" :timestamp="second"  font-size="38"></u-count-down>
				</view>
			</view>
		</view>

		<view class="shop_box" v-for="item in list">
			<view class="flex_side">
				<view class="img_back">
					<img :src="item.image" alt="" style="width: 100%;height: 100%;"/>
				</view>
				<view class="right_box">
					<view class="shop_name">
						<view class="shop_title">
							<view class="">{{item.name}}</view>
							<view class="num">
								<view class="">
									{{$t("auction.commodity-value")}} :
								</view>
								<view class="value">
									{{item.priceRange}}
								</view>

							</view>
							<view class="num">
								<view class="">
									{{$t("auction.consignment-cycle")}} :
								</view>
								<view class="value">
									{{item.salePeriod}}{{$t("public.day")}}
								</view>

							</view>
							<view class="num">
								<view >
									{{$t("auction.growth-rate")}} :
								</view>
								<view class="value">
									{{item.precentRatio}}%
								</view>

							</view>
						</view>
					</view>
					<view class="btn_box">
						<button class="btn" hover-class="hover" @click="buy(item)">{{$t("auction.buying")}}</button>
					</view>
				</view>
			</view>
		</view>



		<view class="bg" v-if="isShowCard"></view>
		<view class="showCard" v-if="isShowCard">
			<u-card :title="auctionSuccess">
				<view class="" slot="body">

					<view class="u-body-item u-flex  u-border-bottom  u-p-t-0">

						<view class="txt_flex">

							<view class="prompt">{{OrderList.prompt}}</view>
							<view class="shop_detail" style="display: flex;padding: 10px 5px;">
								<view class="shopImg" style="width: 50px;height: 50px;margin-right: 5px;">
									<image :src="OrderList.image" alt="" style="width: 100%;height: 100%;"/>
								</view>
								<view class="rightTit" style="display: flex;flex-direction: column;justify-content: space-between">
									<view class="">
										{{OrderList.name}}
									</view>
									<view class="">
										{{OrderList.price}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view  class="foot_btn" slot="foot" style="display: flex;justify-content: space-around;">
					<button @click="back" type="default"  style="border: 1px solid #ccc;width: 90px;height: 40px;line-height: 40px;" class="btn_confirm">{{$t("auction.continue")}}</button>
					<button type="primary" class="btn_confirm" @click="confirm" style="width: 90px;height: 40px;line-height: 40px;" >{{$t("auction.view-order")}}</button>
					<!-- <button v-else type="primary" class="btn_confirm" @click="goLook">去查看</button> -->
				</view>
			</u-card>
		</view>
		<view class="" style="height: 10px;"></view>
	</view>

</template>
<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import Cache from '@/utils/cache';
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		listSeckill
	} from '@/api/new.js'
	import {
		mapGetters
	} from "vuex";
	import {
		purchase,
		seckillBuy
	} from "@/api/new.js"
	// #ifdef H5

	import Auth from '@/libs/wechat';
	// #endif
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	const app = getApp();
	let t = null; 
	const debounce = function(fn, delay) {
	    if( t !== null ) {  
	            clearTimeout(t);  
	        }  
	        t = setTimeout(() => {  
	            fn()  
	        },delay) 
	};
	export default {
		components: {
			// #ifdef MP
			authorize
			// #endif
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
		data() {
			return {
				auctionSuccess: this.$t("auction.buying-success"),
				activeTxt: 2,
				imgUrls: [],
				userMenu: [],
				id: '',
				status: '',
				list: [],
				second: '',
				OrderList: {},
				isShowCard: false,
				seckillId:'',
				clickToSubmitSure:null,
				// OrderList: {
				// 	createTime: "2023-12-20 18:51:34",
				// 	image: "http://127.0.0.1:8080/http://127.0.0.1:8080/crmebimage/public/maintain/2021/12/30/a0015e0e7be446efb720879816e099d0qkmvy7t5bd.png",
				// 	name: "测试商品33",
				// 	orderNo: "rob47334170306949469713272",
				// 	price: "122.00",
				// 	prompt: "您已抢到以下商品，请在19:21:34内完成支付并提交支付凭证，否则将扣除200元"
				// },
			}
		},
		onLoad(e) {
			console.log(e, 'ttt');
			this.id = e.id
			this.status = e.status ? e.status : ''
			this.second = e.second ? e.second : 0
			this.timeRange = e.timeRange?e.timeRange:''
			let that = this;
			this.ch = uni.getStorageSync('AppLocale').code

		},
		onShow: function() {
			this.getList()
			uni.setNavigationBarTitle({
				title: this.$t('auction.product-title')
			})
		},
		methods: {
			
			back(){
				this.isShowCard = false
			},
			confirm(){
				this.isShowCard = false
				uni.navigateTo({
					url:'/pages/users/sale_price/detail?orderInfo='+this.OrderList.orderNo
				})
			},
			
			buy(e) {
				
				debounce(()=>{
						
				console.log(e,'tttt');
				
				let that = this
				// let data = {
				// 	photosUserId: e.photosUserId,
				// 	seckillId: e.seckillId,
				// 	productId: e.productId,
				// 	productSaleConfigId: e.productSaleConfigId
				// }
				this.seckillId = e.seckillId
				let data = {
					shippingSessionsId:Number(that.id),
					productSaleConfigId:Number(e.id),
					timeRange:that.timeRange
				}
				// console.log(that.timeRange.replace(/-/g, ','),'timeRangetimeRangetimeRange');
					// return
				seckillBuy(data).then(res => {
					console.log(res,'seckillBuy');
					
					if (res.code == 200) {
						console.log('第一');
						uni.showLoading({
							title: '抢购中...',
							mask: false
						});
						
						switch (res.data.code){
							case "3004":
							let data = {
								seckillId:res.data.data
							}
							purchase(data).then(res => {
								uni.hideLoading()
								console.log(res,'purchase');
								if (res.code == 200) {
			
								console.log(res,'purchase');
									that.OrderList = res.data
									let value = res.data.value.split(',')
									that.OrderList.prompt = this.$t('auctionTips.20013')+value[0]+this.$t('auctionTips.20014')+value[1]+this.$t('auctionTips.20015')
									
									if(that.OrderList.name.includes('|')){
										if(this.ch == 'en'){
											that.OrderList.name =that.OrderList.name.split('|')[0]
										}else{
											that.OrderList.name =that.OrderList.name.split('|')[1]
										}
									}
									
									
									
					
									that.isShowCard = true
								}						
							// orderNo
							
							}).catch(err => {
								uni.hideLoading()
								that.isShowCard = false
									that.$util.Tips({
										title: this.t('auctionTips.2007')
									});
							});
							break;
							
							case "3003":
							uni.hideLoading()						
							that.$util.Tips({
								title: this.$t('auctionTips.20011')
							});
							break;
							
							case "3002":
							uni.hideLoading()		
							that.$util.Tips({
								title: this.$t('auctionTips.2008')
							});
							break;
							
							case "3001":
							uni.hideLoading()
							that.$util.Tips({
								title: this.$t('auctionTips.20012')
							});
							break;
							
						}
						// if(res.data.code == 200){
						// 	console.log('第二');
							
						// }else{
						// 	uni.hideLoading()
						// 	that.$util.Tips({
						// 		title: this.$t('auctionTips.2008')
						// 	});
						// }
						// that.$util.Tips({
						// 	title: res.data.message
						// });
				// 		this.OrderList = res.data
				// 		this.isShowCard = true
					}
						
				}).catch(err => {
					this.isShowCard = false
						that.$util.Tips({
							title: err
						});
				});
				
		},350)		
				
				// ----------------------
				
				
				
				// purchase(data).then(res => {
				// 	console.log(res);
				// 	if (res.code == 200) {

				// 		this.OrderList = res.data
				// 		this.isShowCard = true
				// 	}
				// }).catch(err => {
				// 	this.isShowCard = false
				// 		that.$util.Tips({
				// 			title: err
				// 		});
				// });
				
				
				
				
			},
			getList() {
				let that = this
				listSeckill().then(res => {
					this.list = res.data
					console.log(res, 'resres');
					that.$util.Tips({
						title: res
					});
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				})
			},
			goAppMent() {
				let id = 1
				uni.navigateTo({
					url: '/pages/my_team/team_application/index?id=' + id
				})
			},
			//收益详情e
			statistics() {

			},
			//日/月汇总
			total() {
				let id = 1
				uni.navigateTo({
					url: '/pages/my_team/team_getMoney/index?id=' + id
				})
				console.log('000===');
			},
			clickDetail(e) {
				uni.navigateTo({
					url: '/pages/my_team/team_detail/index?type=' + e
				})
			},
			getTeam() {
				this.activeTxt = 1
			},
			getCash() {
				this.activeTxt = 2
			},
			// 记录会员访问
			// setVisit(){
			// 	setVisit({
			// 		url:'/pages/user/index'
			// 	}).then(res=>{})
			// },
			goBuy(data) {
				uni.navigateTo({
					url: '/pages/users/user_buy/index?type=' + data,

				})

			},
			goDetails(item) {
				uni.navigateTo({
					url: '/pages/users/user_address_list/index'
				})
			},
			navito(e) {
				window.location.href = 'https://' + e;
			},
			kefuClick() {
				location.href = this.chatUrl;
			},
			getOrderData() {
				let that = this;
				orderData().then(res => {
					that.orderMenu.forEach((item, index) => {
						switch (item.title) {
							case '待付款':
								item.num = res.data.unPaidCount
								break
							case '待发货':
								item.num = res.data.unShippedCount
								break
							case '待收货':
								item.num = res.data.receivedCount
								break
							case '待评价':
								item.num = res.data.evaluatedCount
								break
							case '售后/退款':
								item.num = res.data.refundCount
								break
						}
					})
					that.$set(that, 'orderMenu', that.orderMenu);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		position: relative;
		top: 0;
		left: 0;
		.bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100vh;
			background: #333;
			z-index: 2;
		}
		.showCard {
					width: 100%;
					height: 300px;
					position: absolute;
					top: 30%;
					left: 50%;
					transform: translate(-50%, 0%);
					z-index: 2;
					
		//          .u-card__foot{
			
		
			// 		.foot_btn {
			// 			display: flex;
			// 			justify-content: space-around;
		
			// 			.btn_confirm {
			// 				width: 30%;
			// 				height: 40px;
			// 				line-height: 40px;
			// 			}
			// 		}
			// 		}
				}
	}

	.card {
		// background-color: #fff;
		background: linear-gradient(180deg, #E93323 0%, #F5F5F5 100%, #751A12 100%);
		padding: 0 10px;
		// margin: 10px;
		
		

		

		.top_card {
			.title {
				font-size: 24px;
				font-weight: bold;
				padding: 10px 0;
			}

			.time {
				width: 120px;
				
				// background-color: #027db4;
				// color: #fff;
				// padding: 0 5px;
				margin: 5px 0;
			}
		}
	}

	.shop_box {
		margin: 20px 10px;
		height: 120px;
		background-color: #fff;

		.flex_side {
			display: flex;
			height: 100%;
			padding: 10px;

			.img_back {
				// background-color: aqua;
				height: 100%;
				width: 100px;
			}

			.right_box {
				margin-left: 10px;
				display: flex;
				flex: 1;

				.shop_name {
					height: 100%;
					display: flex;

					.shop_title {
						display: flex;

						flex-direction: column;
						justify-content: space-between;

						.num {
							// margin-left: 5px;
							// padding:5px 25px 0 0;
							font-size: 12px;
							display: flex;
							align-items: center;
						
							.value {
								margin-left: 5px;
								
							}
						}
					}
				}

				.btn_box {
					// background-color: deeppink;
					// width: 60px;
					// height: 60px;
					margin: auto;

					// border-radius: 50%;
					.btn {
						background-color: #027db4;
						// background-color: #ef8134;
						// color: #027db4;
						border-radius: 50%;
						width: 65px;
						height: 65px;
						line-height: 65px;
						font-size: 14px;
					}

					.hover {
						background-color: #94c8df
					}
				}
			}

		}
		
	}
</style>